<template>
  <div class="setting-content inside-comment">
    <h2 class="setting-header">
        <strong>违规用户管理</strong>
    </h2>

    <RuifoxTable
      v-loading="tableLoading"
      v-model:tableData="tableData"
      :field-list="fieldList"
    >
      <template #status="{ element }">
        <div>
          <el-tag v-if="element.status == 1" type="warning">禁言</el-tag>
          <el-tag v-if="element.status == 2" type="danger">拉黑</el-tag>
          <el-tag v-if="element.status == 3" type="info">-</el-tag>
        </div>
      </template>
      <template #options="{ element }">
        <div class="table-td-option unmover">
          <el-button
            type="primary"
            link
            @click="showMark(element)"
          >
            查看违规留言
          </el-button>
          <el-button
            type="primary"
            link
            @click="relieveMuted(element)"
          >
            解除禁言
          </el-button>
          <el-button
            type="primary"
            link
            @click="relieveBlock(element)"
          >
            撤销黑名单
          </el-button>
        
        </div>
      </template>
    </RuifoxTable>
    <PaginationView
      :total="queryData.total"
      :pageSize="queryData.pageSize"
      :currentPage="queryData.currentPage"
      :allChoose="isAllChooseBtn"
      :pageChoose="isPageChooseBtn"
      :options="batchOptions"
      :checkedNum="checkedNum"
      :canChoose="queryData.total > 0"
      @changeSize="handleSizeChange"
      @currentChange="handleCurrentChange"
      @changePageChoose="handlePageChoose"
      @changeAllChoose="handleAllChoose"
      @invertChoose="handleInvertChoose"
      @checkOption="handleBatchOptions"
      @refreshList="getUser"
      @cancelChoose="handleResetPagination"
    />

    <!-- 用户标记的留言 -->
    <el-dialog
      v-model="showMaikDialogVisible"
      title="留言详情"
      width="1000px"
      class="comment-detail-dialog"
    >
      <el-scrollbar height="550px">
        <RuifoxTable
          v-loading="tableLoading"
          :table-data="markData"
          :field-list="fieldMarkList"
          :default-index="true"
          :default-checkbox="false"
          :lazy="true"
        >
          <!-- 内容列 -->
          <template #content="{ element }">
            <div class="content-container">
              <i class="is-read" v-if="element.isRead == false"></i>
              <span class="content-text" @click="showDetail(element)">{{element.content.content[0].value}}</span>
            </div>
          </template>

          <!-- 创建时间列 -->
          <template #publishTime="{ element }">
            {{ dayjs(element.publishTime).format("YYYY-MM-DD HH:mm:ss") }}
          </template>

          <template #options="{ element }">
            <div class="table-td-option unmover">
              <el-button
                type="primary"
                link
                @click="showDetail(element)"
              >
                查看详情
              </el-button>
            </div>
          </template>
        </RuifoxTable>
      </el-scrollbar>
    </el-dialog>

    <!-- 详情 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="留言详情"
      width="1000px"
      class="comment-detail-dialog"
      >
      <el-scrollbar height="600px">
        <div class="comment-detail">
          <div class="main-comment">
            <div class="comment-title">
              <div class="left">
                <span class="label">留言人：</span>
                <span class="value">{{ currentDetail.userName }}</span>
              </div>
              <div class="right">
                <div class="button-list">
                  <el-button
                    type="primary"
                    link
                    @click="handlemark(currentDetail)"
                    >
                    取消标记
                  </el-button>
                </div>
              </div>
            </div>
            <!-- 留言信息 -->
            <div class="comment-info">
              <div class="info-item">
                <span class="label">IP地址：</span>
                <span class="value">{{ currentDetail.ip }}</span>
              </div>
              <div class="info-item">
                <span class="label">留言时间：</span>
                <span class="value">{{
                  dayjs(currentDetail.publishTime).format("YYYY-MM-DD HH:mm:ss")
                }}</span>
              </div>
              <div class="info-item">
                <span class="label">所属留言表：</span>
                <span class="value">{{ currentDetail.formName }}</span>
              </div>
              <div class="info-item">
                <span class="label">所属分类：</span>
                <span class="value">{{ currentDetail.typeName }}</span>
              </div>
              <div class="info-item">
                <span class="label">标记原因：</span>
                <span class="value">{{ currentDetail.markedReason }}</span>
              </div>
              <div class="info-item">
                <span class="label">留言内容：</span>
              </div>
            </div>
            <!-- 分割线 -->
            <el-divider style="margin-bottom: 15px;"/>
            <!-- 留言内容 -->
            <FormRenderer
              :fields="currentDetail?.content?.content"
              :model-value="{}"
              disabled
              label-width="100px"
            />
          </div>
        </div>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { selectPageManagerMarkedUser } from '@/api/user'
import { tableList as mixTable } from "@ruifox-cms/utils";
import { 
  unmuteManagerMarkedUser, 
  unblockManagerMarkedUser,
  selectByMarkedManagerMarkedUser,
  cancelMarkedManagerMarkedUser
 } from '@/api/user'
//  import { getCommentTreeByIdCommentMessages } from '@/api/comment'
import { ElMessage } from 'element-plus' 
import dayjs from "dayjs";
import FormRenderer from "../components/FormRenderer";

const {
  queryData,
  tableData: oriTableData,
  tableLoading,
  checkedNum,
  isAllChooseBtn,
  isPageChooseBtn,
  // getTableData,
  //   handleSearch,
  handleCurrentChange,
  handleSizeChange,
  handlePageChoose,
  handleAllChoose,
  handleInvertChoose,
  // handleCheckTable,
  handleResetPagination,
} = mixTable({
  getListApi: selectPageManagerMarkedUser,
});

//查询违规用户
const defaultQuery = reactive({
  total: 10,
  currentPage: 1,
  pageSize: 10,
  // isMuted: "",
  // isBlack: ""
});
const tableData = ref([]);
Object.assign(queryData, defaultQuery);

const getUser = async () => {
  const res = await selectPageManagerMarkedUser(queryData)
  if (res.code == 20000) {
    oriTableData.value = res.data.list;
    tableData.value = res.data.list;
    queryData.total = res.data.total;
  }
}
// getTableData();

//解除禁言
const relieveMuted = async (item) => {
  const res = await unmuteManagerMarkedUser({
    userId: item.userId,
  });
  if (res.code == 20000) {
    ElMessage.success("解除禁言成功");
    getUser();
  }
};

//取消拉黑
const relieveBlock = async (item) => {
  const res = await unblockManagerMarkedUser({
    userId: item.userId,
  });
  if (res.code == 20000) {
    getUser();
    ElMessage.success("取消拉黑成功");
  }
};

//用户标记留言查询展示 
const showMaikDialogVisible = ref(false);
const currentDetail = ref({});
const detailDialogVisible = ref(false);
const markData = ref([]);
//查询用户所有标记留言
const showMark = async (item) => {
  showMaikDialogVisible.value = true;
  const res = await selectByMarkedManagerMarkedUser({
    userId: item.userId,
  });
  if (res.code == 20000) {
    markData.value = res.data;
  }
}
const showDetail = async (row) => {
  currentDetail.value = row;
  console.log("currentDetail.value",currentDetail.value);

  // let res = await getCommentTreeByIdCommentMessages({
  //   commentId: row.id,
  // });
  // if (res.code === 20000) {
  //   currentDetail.value.content = res.data[0].content;
    
  // } else {
  //   ElMessage.error("获取回复失败");
  // }
  detailDialogVisible.value = true;
};
//取消留言标记
const cancelMarkedFrom = ref({
  commentId: 0,
  userId: 0,
})
const handlemark = async (item) => {
  cancelMarkedFrom.value.commentId = item.commentId
  cancelMarkedFrom.value.userId = item.userId
  console.log("cancelMarkedFrom.value",cancelMarkedFrom.value);
  const res = await cancelMarkedManagerMarkedUser(cancelMarkedFrom.value)
  if (res.code == 20000) {
    ElMessage.success("取消标记成功");
    detailDialogVisible.value = false;
    showMark(item)
    getUser();

  }
}
//表格展示字段
const fieldList = ref([
  {
    title: "用户名称",
    name: "username",
  },
  {
    title: "ip地址",
    name: "ipList",
  },
  {
    title: "标记留言（条）",
    name: "markedCount",
  },
  {
    title: "当前状态",
    name: "status",
  },
  {
    title: "操作",
    name: "options",
    width: 300,
  },
]);
const fieldMarkList = ref([
  {
    title: "留言标题（点击查看详情）",
    name: "content",
    width: 200,
  },
  {
    title: "标记原因",
    name: "markedReason",
    width: 150,
  },
  {
    title: "留言人",
    name: "userName",
  },
  {
    title: "留言ip",
    name: "ip",
  },
  {
    title: "留言时间",
    name: "publishTime",
  },
  {
    title: "所属留言",
    name: "formName",
  },
  {
    title: "所属分类",
    name: "typeName",
  },
  {
    title: "操作",
    name: "options",
    width: 100,
    fixed: "right",
  },
])
onMounted(async() => {
  await getUser()
});
</script>

<style scoped lang="scss"> 
:deep(.comment-detail-dialog) {
  .el-dialog__body {
    padding: 0; // 移除默认内边距

    .el-scrollbar {
      padding: 20px; // 将内边距添加到滚动区域
    }
  }
}

.comment-detail {
  .comment-header {
    margin-bottom: 16px;

    .header-title {
      font-size: 18px;
      font-weight: 500;
      color: #303133;
    }
  }

  .main-comment {
    padding: 16px;
    margin-bottom: 20px;
    border: 1px solid #e4e7ed;
    border-radius: 4px;

    .comment-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;

      .left {
        display: flex;
        align-items: center;

        .label {
          color: #606266;
          margin-right: 8px;
        }

        .value {
          color: #303133;
        }
      }

      .right {
        display: flex;
        align-items: center;
        gap: 16px;
        button{
          font-size: 14px;
        }
      }
    }

    .comment-info {
      margin: 12px 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .info-item {
        width: 48%;
        display: flex;
        align-items: center;
        margin-bottom: 8px;

        &:last-child {
          margin-bottom: 0;
          width: 100%;
        }

        .label {
          color: #606266;
          margin-right: 8px;
          min-width: 70px;
        }

        .value {
          color: #303133;
        }
      }
    }

    .comment-content {
      padding: 12px 0;

      :deep(*) {
        font-size: 14px !important;
        line-height: 1.6;
      }

      :deep(img) {
        max-width: 100%;
        height: auto;
      }
    }
  }

  .reply-list {
    .reply-header {
      margin-bottom: 16px;

      .header-title {
        font-size: 18px;
        font-weight: 500;
        color: #303133;

        .count {
          font-size: 14px;
          color: #909399;
          margin-left: 4px;
          font-weight: normal;
        }
      }
    }

    .reply-items {
      .reply-item {
        padding: 16px;
        border: 1px solid #ebeef5;
        border-radius: 4px;
        margin-bottom: 12px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
        background: #fff;
        transition: box-shadow 0.3s ease;

        &:hover {
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
        }

        &:last-child {
          margin-bottom: 5px;
        }

        .reply-info {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;

          .left {
            display: flex;
            align-items: center;
            gap: 24px;

            .username {
              color: #303133;
              font-size: 14px;
            }

            .time {
              color: #909399;
              font-size: 14px;
            }
          }
          .right{
            button{
              font-size: 14px;
              margin-left: 15px;
            }
          }
        }

        .el-divider {
          margin: 12px 0;
          border-top: 1px solid #f0f0f0;
        }

        .reply-content {
          :deep(*) {
            font-size: 14px !important;
            line-height: 1.6;
          }

          :deep(img) {
            max-width: 100%;
            height: auto;
          }
        }
        .audit-progress{
            margin-top: 10px;
            .audit-title{
              font-size: 16px;
              color: #333;
            }
            .audit-list{
              display: flex;
              margin-top: 10px;
              .audit-item{
                flex: 1;
                position: relative;
                &::after{
                    position: absolute;
                    left: 0;
                    top: 10px;
                    z-index: 1;
                    content: '';
                    height: 1px;
                    width: 100%;
                    background: #dddddd;
                  }
                  &:last-child{
                    &::after{
                      display: none;
                    }
                  }
                i{
                  font-size: 20px;
                  position: relative;
                  z-index: 3;
                }
                p{
                  margin-top: 5px;
                  &.username{
                    display: flex;
                    align-items: center;
                    i{
                      margin-left: 10px;
                      font-size: 18px;
                    }
                  }
                }
              }
            }
        }
      }
    }
  }
}
.el-radio{
  margin-right: 30px;
}
</style>
